<script>
/* eslint-disable no-undef */
import VueTabsSwipe from 'vue-tabs-swiper';
import { getFileList, uploadFileMulti } from '@/api/formview';
import { downFile, dataURLtoFile } from '@/utils/files';
import { Message } from '@/utils/utils';
import UImg from 'uview-ui/components/u-image/u-image';
import UniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue';
import WCompress from '@/components/w-compress/w-compress.vue';

// import TabPanelItem from './TabPanelItem';
const TabPanelItem = {
  name: 'TabPanelItem',

  props: {
    tab: {
      default: () => ({}),
      type: Object
    }
  },

  components: {
    UImg
  },

  render() {
    return (
      <div class='ProProcess-picture-container' >
        <div
          class='ProProcess-picture-item'
          style={
            {
              '--num': 3,
              '--num-height': '200px'
            }
          }
          v-viewer={
            { movable: false }
          }
        >
          {
            this.tab.picList.map(file => {
              return (
                <div >
                  <UImg
                    style={
                      {
                        width: '100%',
                        height: '100%'
                      }
                    }
                    src={file.b64}
                    border-radius='6'
                  />
                </div>
              );
            })
          }
        </div>

      </div>
    );
  }
};

export default {
  name: 'ProProcess',

  components: {
    VueTabsSwipe,
    TabPanelItem,
    UniFab,
    WCompress
  },

  data() {
    return {
      tabCurrent: 0,
      isLoading: false,
      renderOver: false,

      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        width: '10px',
        height: '10px'
      },
      fibContent: [
        {
          iconPath: '/static/img/formView/upload.png',
          selectedIconPath: '/static/img/formView/upload.png',
          text: '上传',
          active: false,
          type: 'upload'
        }
      ],
      tabs: [
        {
          label: '项目竣工资料',
          picList: [],
          type: 'pic',
          isLoading: false,
          requestData: {
            condition: '185',
            pageIndex: 0,
            pageSize: 50,
            sort: '"uploadTime" DESC',
            type: ['S0003']
          }
        },
        {
          label: '项目现场图',
          isLoading: false,
          picList: [],
          type: 'pic',
          requestData: {
            condition: '185',
            pageIndex: 0,
            pageSize: 50,
            sort: '"uploadTime" DESC',
            type: ['S0004']
          }
        }
      ]
    };
  },

  methods: {
    tabChange(e, type) {
      this.tabCurrent = e;
      const item = this.tabs.find((item, index) => index === e);
      if (type === 'agin') {
        this.getPicFiles(item);
      } else {
        if (!item.picList.length && !item.isLoading) {
          this.isLoading = true;
          item.isLoading = true;
          this.getPicFiles(item);
        }
      }
    },

    // 获取filePages
    getPicFiles(item) {
      getFileList(item.requestData).then(res => {
        item.isLoading = false;
        this.isLoading = false;
        if (res.success) {
          item.picList = res.data;
          this.downPicFile(item);
        }
      });
    },

    fabBtnClick({ item }) {
      const { type } = item;
      const {
        tabs,
        tabCurrent,
        getFiles
      } = this;

      if (type === 'upload') { // 上传
        const tabNow = tabs[tabCurrent];
        getFiles().then(files => {
          this.upLoadFile(files, tabNow);
        });
      }
    },

    upLoadFile(files, tab) {
      const requestData = new FormData();
      files.map(file => {
        requestData.append('files', file);
      });

      requestData.append('type', tab.requestData.type[0]);
      requestData.append('condition', tab.requestData.condition);

      uploadFileMulti(requestData).then(res => {
        if (res.success) {
          Message(res.message);
          this.tabChange(this.tabCurrent, 'agin');
        }
      });
    },

    // 获取压缩后的图片文件
    getFiles() {
      return this.chooseImgs().then(res => {
        const { files, paths } = res;
        const dealFiles = [];
        return this.picCompress(paths).then(dealRes => {
          dealRes.forEach((b64, index) => {
            dealFiles.push(dataURLtoFile(b64, files[index].name));
          });
          return Promise.resolve(dealFiles);
        });
      });
    },

    // 压缩
    picCompress(tempFilePaths) {
      return this.$refs.wCompress.start(tempFilePaths);
    },

    // 选择图片
    chooseImgs() {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: 9,
          success: (res) => {
            resolve({
              paths: res.tempFilePaths,
              files: res.tempFiles
            });
          },

          fail: () => {
            reject('调用图片失败');
          }
        });
      });
    },

    async downPicFile(item) {
      for (let index = 0; index < item.picList.length; index++) {
        const file = item.picList[index];
        const b64 = await downFile(file, 'pic');
        this.$set(file, 'b64', b64);
      }
    }
  }
};

</script>

<template>
  <div class="ProProcess-page">
    <Uni-Fab
      :content="fibContent"
      :pattern="pattern"
      horizontal="right"
      vertical="bottom"
      :pop-menu="true"
      class="ProProcess-fab"
      @trigger="fabBtnClick"
    />
    <Vue-Tabs-Swipe
      :value="tabCurrent"
      tab-font-weight="600"
      :tab-slider-width="50"
      border-bottom
      touch-animation
      @change="e => tabChange(e)"
    >
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="ProProcess-panel-item"
        :tab-label="tab.label"
      >
        <Tab-Panel-Item
          :tab="tab"
        />
      </div>
    </Vue-Tabs-Swipe>

    <!-- 压缩工具 -->
    <w-compress ref="wCompress" :pixels="500000" />
  </div>
</template>
